# DAY4 程式流程

第 11 屆 iThome 鐵人賽

DAY 4

Modern Web

從零開始的Angular前端開發系列第 4 篇

11th鐵人賽

fansen

團隊Bikini Bottom

2019-09-19 22:37:40

1053 瀏覽

分享至

我們在DAY 1建立的網站，大家應該還有印象。

我們今天來看一下這個頁面是怎麼產生的吧～

在這之前，先補充一些使用VSCODE的小訣竅。

先開啟VSCODE，並開啟我們的專案，你可以選擇以下三種方案:

從[VSCODE]->[檔案]->[開啟資料夾]，然後選你的Angular專案即可。

蛤，你說我的VSCODE為什麼是中文？在VSCODE左邊欄選第五個圖示，搜尋Chinese，就可以找到中文的語言包並安裝囉～
在[專案資料夾] -> [右鍵] -> [Open with Code]
在專案資料夾開啟Command Line，輸入：

code .

按住Shift + 滑鼠右鍵也會出現選項讓你快速開啟Command Line唷～

進到VSCODE後，按快捷鍵:

Ctrl + `

開啟 Terminal ，也就是 Command Line 。「 ` 」這個鍵通常在鍵盤的 ESC 下方。

接著你應該就可以在 VSCODE 下方輸入 command 了。

先下指令開啟測試伺服器以及瀏覽器：

ng serve -o

在瀏覽器按F12或 [右鍵] -> [檢查] ，就可以開啟開發人員模式。

首頁，也就是現在這個頁面，會顯示 index.html 的內容。從開發人員模式可以看出來，能顯示在瀏覽器的內容放在 <body></body> 標籤裡，裡面有一個 app-root 的標籤和一些匯入js的標籤，其中 app-root 就是我們的內容來源:

那我們一步步來看 app-root 是怎麼產生的吧。

我們之前在 angular.json 中看過的:

"index": "src/index.html"
"main": "src/main.ts"

分別定義了首頁和程式進入點，若之前有學過 C 、 JAVA 之類的程式語言，對於 main function 應該不陌生，像這樣:

int main() {
    ...
    return 0;
}

那麼現在 main.ts 這個檔案就是取代了 main function 的角色。

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

typescript 是腳本語言，與 javascript 、 python 類似，都是逐行執行程式碼。我們看看這個檔案做了甚麼事：

1 ~ 5 行: 匯入一些變數和這個 ts 檔用到的 funtion 。
7 ~ 9 行: 真正執行程式是從這裡開始，還記不記得我們之前介紹過一個environments資料夾，這個 if 判斷式是當我們下了 ng build --prod 這個命令時， environment.ts 會被置換成environment.prod.ts ，使得這邊的environment.prodution 從False被換成True，才會執行enableProdMode() 這個function。
11 ~ 12 行，這邊是執行 platformBrowserDynamic() 產生一個 platform 的實體，然後用 bootstrapModule() 載入 AppModule 這個模組，後面串接 .catch(err => console.error(err)) 是把錯誤訊息導向console。
OK， AppModule ，我們繼續往下。

AppModule

按Crtl +滑鼠左鍵點一下 AppModule ，就可以切換到 app.module.ts。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

由第6行的 @NgModule 可以知道 AppModule這個class被標註成NgModule，@NgModule 是一個Decorator，之後會詳細介紹有關於Decorator以及NgModule的每個欄位。我們先專注在如何產生頁面：

declarations
這個地方放的是要用到的 Component 、 Directive 跟 Pipe，目前只有 AppComponent。
bootstrap
這個地方放的是 root component，只有 root module 需要設定這個欄位。這邊的 AppComponent 會被插入到index.html中。

AppComponent

所以關鍵角色是 AppComponent，一個 Component 會有四個檔案:

app.component.css
給該 component 使用的css，目前是空的。
app.component.html
AppComponent 要如何顯示內容的樣板就定義在這裡，也就是我們看到的首頁。
注意這段程式碼：

  <h1>
    Welcome to {{ title }}!
  </h1>

這邊用了 {{ ... }} 這個語法，是Angular 的 data binding 語法中的 Interpolation，中文譯作插值，data binding 還有其他語法，之後逐一介紹。
{{ ... }}裡 title 的值，會定義在 app.component.ts 中，由 Angular 將他們綁定。在執行期時，把title的內容送到 app.component.html，因此就會看到Welcome to Sponge-Website! ，而不是Welcome to {{ title }}!。

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Sponge-Website';
}

我們又見到了 Decorator ，這次是 @Component ，同樣也是宣告這個 class 為 Component ，注意到第 7 行的 title 就是被送到 html 的內容。我們看一下 Component 要定義哪些東西：

selector
選擇器，概念跟 css 的選擇器類似。可以先把他想成，要在 html 中使用這個元件，要給他的名字。所以我們可以用<app-root></app-root>這個標籤，來顯示這個 Component。
把這邊改成其他名字，網站就會噴 error 囉，selector必須跟index.html的標籤對應上，可以實驗看看。
templateUrl
該 component 用的樣板，除了指定 html 檔的位置外，也可以直接填入html語法，像這樣:

templateUrl: '<h1> Hello world </h1>'

styleUrls
該 Component 用到的 css ，是一個陣列，也就是可以放多個 css 檔。
app.component.spec.ts
用於單元測試的檔案，稍微看一下裡面其中一段程式碼：

這邊有一些測試腳本的範例，像這段就是檢查頁面標題是不是和Sponge-Website一致，先有初步認識即可。